<template>
  <div class="as-date-pick__dropdown">
    <as-date-pick-header :visible="visible"
                         :type="type"
                         :visibleType.sync="visibleType"></as-date-pick-header>
    <as-date-pick-body v-show="visibleType==='day'&&type!=='year'&&type!=='month'"
                       @change="$emit('change')"
                       :now="now"
                       :type="type"
                       :active="active"
                       :visible="visible">
    </as-date-pick-body>
    <as-date-pick-month-body v-show="
                             visibleType === 'month' ||
                             ( type === 'month' &&
                             visibleType !== 'year' ) &&
                             type !== 'year'"
                             :visibleType.sync="visibleType"
                             :now="now"
                             @change="$emit('change')"
                             :type="type"
                             :active="active"
                             :visible="visible">
    </as-date-pick-month-body>
    <as-date-pick-year-body v-show="visibleType==='year'||type==='year'"
                            :visibleType.sync="visibleType"
                            @change="$emit('change')"
                            :now="now"
                            :type="type"
                            :active="active"
                            :visible="visible">
    </as-date-pick-year-body>
  </div>
</template>

<script type="text/ecmascript-6">
import AsDatePickHeader from "./date-pick-header";
import AsDatePickBody from "./date-pick-body";
import AsDatePickMonthBody from "./date-pick-month-body";
import AsDatePickYearBody from "./date-pick-year-body";
export default {
  name: "AsDatePickDropdown",
  components: {
    AsDatePickHeader,
    AsDatePickBody,
    AsDatePickMonthBody,
    AsDatePickYearBody
  },
  props: {
    now: Object,
    active: Object,
    visible: Object,
    type: String
  },
  data() {
    return {
      visibleType: "day"
    };
  }
};
</script>
